<template>
  <a-layout-header class="header">
    <div class="container">
      <div class="header-content">
        <div class="logo">
          <router-link to="/">
            <h1>WatermarkRemover Pro</h1>
          </router-link>
        </div>
        
        <nav class="nav">
          <router-link to="/" class="nav-link">首页</router-link>
          <router-link to="/#features" class="nav-link">功能</router-link>
          <router-link to="/#pricing" class="nav-link">价格</router-link>
        </nav>

        <div class="auth-section">
          <template v-if="authStore.isAuthenticated">
            <a-dropdown>
              <a-button type="text" class="user-dropdown">
                <a-avatar :src="authStore.user?.avatar" size="small">
                  {{ authStore.user?.username?.charAt(0)?.toUpperCase() }}
                </a-avatar>
                <span class="username">{{ authStore.user?.username }}</span>
                <DownOutlined />
              </a-button>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="dashboard">
                    <router-link to="/dashboard">
                      <DashboardOutlined />
                      控制台
                    </router-link>
                  </a-menu-item>
                  <a-menu-item key="profile">
                    <router-link to="/dashboard/profile">
                      <UserOutlined />
                      个人资料
                    </router-link>
                  </a-menu-item>
                  <a-menu-item key="settings">
                    <router-link to="/dashboard/settings">
                      <SettingOutlined />
                      设置
                    </router-link>
                  </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="logout" @click="handleLogout">
                    <LogoutOutlined />
                    退出登录
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </template>
          <template v-else>
            <router-link to="/login">
              <a-button type="text">登录</a-button>
            </router-link>
            <router-link to="/register">
              <a-button type="primary">注册</a-button>
            </router-link>
          </template>
        </div>
      </div>
    </div>
  </a-layout-header>
</template>

<script setup>
import { useAuthStore } from '../stores/auth'
import { 
  DownOutlined, 
  DashboardOutlined, 
  UserOutlined, 
  SettingOutlined, 
  LogoutOutlined 
} from '@ant-design/icons-vue'

const authStore = useAuthStore()

const handleLogout = () => {
  authStore.logout()
}
</script>

<style scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 0;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1890ff;
}

.logo a {
  text-decoration: none;
  color: inherit;
}

.nav {
  display: flex;
  gap: 32px;
}

.nav-link {
  text-decoration: none;
  color: #666;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #1890ff;
}

.auth-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
}

.username {
  margin-left: 8px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .nav {
    display: none;
  }
  
  .username {
    display: none;
  }
}
</style> 